import * as React from "react";
import {Box, Button, Grid, TextField, Typography} from "@mui/material";
import {useState} from "react";
import {useModifyPhoneNumber} from "../../hooks/useModifyPhoneNumber.ts";
import {useModifyPassword} from "../../hooks/useModifyPassword.ts";
import {useUploadPhoto} from "../../hooks/useUploadPhoto.ts";

const UserSettings: React.FC = () => {
    const [password, setPassword] = useState('');
    const [newPassword, setNewPassword] = useState('');
    const [newPasswordConfirm, setNewPasswordConfirm] = useState('');
    const {modifyPassword, isLoading1, error1} = useModifyPassword();
    const [passwordUpdateText, setPasswordUpdateText] = useState('UPDATE');

    const handleModifyPassword = async () => {
        if (newPasswordConfirm !== newPassword) {
            return;
        }
        await modifyPassword(password, newPassword);
        if (error1) {
            setPasswordUpdateText(error1);
            setTimeout(() => {
                setPasswordUpdateText('UPDATE');
            }, 3000);
            return;
        }

        setPasswordUpdateText('修改成功');
        setTimeout(() => {
            setPasswordUpdateText('UPDATE');
        }, 3000);
    }

    const [phoneNumber, setPhoneNumber] = useState('');
    const [newPhoneNumber, setNewPhoneNumber] = useState('');
    const {modifyPhoneNumber, isLoading, error} = useModifyPhoneNumber();
    const [phoneNumberUpdateText, setPhoneNumberUpdateText] = useState('UPDATE');

    const handleModifyPhoneNumber = async () => {
        await modifyPhoneNumber(phoneNumber, newPhoneNumber);
        if (error) {
            setPhoneNumberUpdateText(error);
            setTimeout(() => {
                setPhoneNumberUpdateText('UPDATE');
            }, 3000);
            return;
        }

        setPhoneNumberUpdateText('修改成功');
        setTimeout(() => {
            setPhoneNumberUpdateText('UPDATE');
        }, 3000);
    }

    const {selectedFile, handleFileChange, handleUploadPhoto, uploadStatus} = useUploadPhoto();

    return (
        <Box>
            <Grid container justifyContent="center" alignItems="center" spacing={2}>
                <Grid item xs={6}>
                    <Typography variant="body2" sx={{marginTop: 6, marginBottom: 0, color: '#616161'}}>
                        请输入原手机号
                    </Typography>
                    {/*原手机号输入框*/}
                    <TextField variant="standard" fullWidth margin="normal" required
                               value={phoneNumber} onChange={(e) => setPhoneNumber(e.target.value)}/>
                    <Typography variant="body2" sx={{marginTop: 4, marginBottom: 0, color: '#616161'}}>
                        请输入要修改的手机号
                    </Typography>

                    {/*修改手机号输入框*/}
                    <TextField variant="standard" fullWidth margin="normal" required
                               value={newPhoneNumber} onChange={(e) => setNewPhoneNumber(e.target.value)}/>

                    {/*修改手机号更新按钮*/}
                    <Button type="submit" fullWidth variant="contained" size="large"
                            color="primary"
                            disabled={isLoading} onClick={handleModifyPhoneNumber}
                            sx={{
                                marginTop: 2,
                                backgroundColor: '#21c491',
                                '&:hover': {backgroundColor: '#1eb384'}
                            }}>
                        {phoneNumberUpdateText}
                    </Button>

                    <Typography variant="body2" sx={{marginTop: 6, marginBottom: 0, color: '#616161'}}>
                        请输入原密码
                    </Typography>
                    {/*原密码输入框*/}
                    <TextField variant="standard" type="password" autoComplete="current-password"
                               fullWidth margin="normal" required
                               value={password} onChange={(e) => setPassword(e.target.value)}/>

                    <Typography variant="body2" sx={{marginTop: 4, marginBottom: 0, color: '#616161'}}>
                        请输入要修改的密码
                    </Typography>
                    {/*密码输入框*/}
                    <TextField variant="standard" type="password" autoComplete="current-password"
                               fullWidth margin="normal" required
                               value={newPassword} onChange={(e) => setNewPassword(e.target.value)}/>
                    <Typography variant="body2" sx={{marginTop: 4, marginBottom: 0, color: '#616161'}}>
                        请输入再次输入要更改的密码
                    </Typography>
                    {/*密码确认框*/}
                    <TextField variant="standard" type="password" autoComplete="current-password"
                               fullWidth margin="normal" required
                               value={newPasswordConfirm} onChange={(e) => setNewPasswordConfirm(e.target.value)}/>

                    {/*修改密码更新按钮*/}
                    <Button type="submit" fullWidth variant="contained" size="large"
                            color="primary"
                            disabled={isLoading1} onClick={handleModifyPassword}
                            sx={{
                                marginTop: 2,
                                backgroundColor: '#21c491',
                                '&:hover': {backgroundColor: '#1eb384'}
                            }}>
                        {passwordUpdateText}
                    </Button>

                    {/*上传考勤人脸图片按钮*/}
                    <input
                        accept="image/*"
                        style={{display: 'none'}}
                        id="upload-photo"
                        type="file"
                        onChange={handleFileChange}
                    />
                    <label htmlFor="upload-photo">
                        <Button component="span" fullWidth variant="contained" size="large"
                                color="primary"
                                sx={{
                                    marginTop: 4,
                                    backgroundColor: '#21c491',
                                    '&:hover': {backgroundColor: '#1eb384'}
                                }}>
                            选择照片
                        </Button>
                    </label>
                    <Button type="submit" fullWidth variant="contained" size="large"
                            color="primary"
                            onClick={handleUploadPhoto}
                            disabled={!selectedFile}
                            sx={{
                                marginTop: 2,
                                backgroundColor: '#21c491',
                                '&:hover': {backgroundColor: '#1eb384'}
                            }}>
                        上传考勤人脸图片
                    </Button>
                    {uploadStatus && (
                        <Typography variant="body2" sx={{marginTop: 2, color: '#616161'}}>
                            {uploadStatus}
                        </Typography>
                    )}
                </Grid>
            </Grid>
        </Box>
    );
}

export default UserSettings;
